<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>风机控制面板</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
</head>
<style>
    .panel-body {
    width: 80%;
}
</style>
<body>
<div class="layui-card">
    <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
    <div class="layui-card-body">
        <div class="layui-row ">
            <div class="layui-col-sm3">
                <div class="panel layui-bg-number">
                    <div class="panel-body">
                        <div class="panel-title">
                            <span class="layui-bg-blue">风机</span>
                        </div>
                        <div class="panel-content">
                            <div class="layui-form">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">V</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="voltage" lay-verify="required" placeholder="请输入电压"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">A</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="current" lay-verify="required" placeholder="请输入电流"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">HZ</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="frequency" lay-verify="required"
                                               placeholder="请输入频率" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block" style="text-align: center;">
                                        <button type="button" class="layui-btn layui-btn-normal">启动</button>
                                        <button type="button" class="layui-btn layui-btn-primary">停止</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm3">
                <div class="panel layui-bg-number">
                    <div class="panel-body">
                        <div class="panel-title">
                            <span class="label pull-right layui-bg-cyan">风机</span>
                        </div>
                        <div class="panel-content">
                            <div class="panel-content">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">V</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="voltage" lay-verify="required"
                                                   placeholder="请输入电压" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">A</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="current" lay-verify="required"
                                                   placeholder="请输入电流" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">HZ</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="frequency" lay-verify="required"
                                                   placeholder="请输入频率" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" style="text-align: center;">
                                            <button type="button" class="layui-btn layui-btn-normal">启动</button>
                                            <button type="button" class="layui-btn layui-btn-primary">停止</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm3">
                <div class="panel layui-bg-number">
                    <div class="panel-body">
                        <div class="panel-title">
                            <span class="label pull-right layui-bg-orange">风机</span>
                        </div>
                        <div class="panel-content">
                            <div class="panel-content">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">V</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="voltage" lay-verify="required"
                                                   placeholder="请输入电压" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">A</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="current" lay-verify="required"
                                                   placeholder="请输入电流" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">HZ</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="frequency" lay-verify="required"
                                                   placeholder="请输入频率" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" style="text-align: center;">
                                            <button type="button" class="layui-btn layui-btn-normal">启动</button>
                                            <button type="button" class="layui-btn layui-btn-primary">停止</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm3">
                <div class="panel layui-bg-number">
                    <div class="panel-body">
                        <div class="panel-title">
                            <span class="label pull-right layui-bg-orange">风机</span>
                        </div>
                        <div class="panel-content">
                            <div class="panel-content">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">V</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="voltage" lay-verify="required"
                                                   placeholder="请输入电压" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">A</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="current" lay-verify="required"
                                                   placeholder="请输入电流" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">HZ</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="frequency" lay-verify="required"
                                                   placeholder="请输入频率" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" style="text-align: center;">
                                            <button type="button" class="layui-btn layui-btn-normal">启动</button>
                                            <button type="button" class="layui-btn layui-btn-primary">停止</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <div class="layui-row ">
            <div class="layui-col-sm3">
                <div class="panel layui-bg-number">
                    <div class="panel-body">
                        <div class="panel-title">
                            <span class="layui-bg-blue">风机</span>
                        </div>
                        <div class="panel-content">
                            <div class="layui-form">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">V</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="voltage" lay-verify="required" placeholder="请输入电压"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">A</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="current" lay-verify="required" placeholder="请输入电流"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">HZ</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="frequency" lay-verify="required"
                                               placeholder="请输入频率" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block" style="text-align: center;">
                                        <button type="button" class="layui-btn layui-btn-normal">启动</button>
                                        <button type="button" class="layui-btn layui-btn-primary">停止</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm3">
                <div class="panel layui-bg-number">
                    <div class="panel-body">
                        <div class="panel-title">
                            <span class="label pull-right layui-bg-cyan">风机</span>
                        </div>
                        <div class="panel-content">
                            <div class="panel-content">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">V</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="voltage" lay-verify="required"
                                                   placeholder="请输入电压" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">A</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="current" lay-verify="required"
                                                   placeholder="请输入电流" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">HZ</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="frequency" lay-verify="required"
                                                   placeholder="请输入频率" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" style="text-align: center;">
                                            <button type="button" class="layui-btn layui-btn-normal">启动</button>
                                            <button type="button" class="layui-btn layui-btn-primary">停止</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm3">
                <div class="panel layui-bg-number">
                    <div class="panel-body">
                        <div class="panel-title">
                            <span class="label pull-right layui-bg-orange">风机</span>
                        </div>
                        <div class="panel-content">
                            <div class="panel-content">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">V</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="voltage" lay-verify="required"
                                                   placeholder="请输入电压" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">A</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="current" lay-verify="required"
                                                   placeholder="请输入电流" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">HZ</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="frequency" lay-verify="required"
                                                   placeholder="请输入频率" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" style="text-align: center;">
                                            <button type="button" class="layui-btn layui-btn-normal">启动</button>
                                            <button type="button" class="layui-btn layui-btn-primary">停止</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm3">
                <div class="panel layui-bg-number">
                    <div class="panel-body">
                        <div class="panel-title">
                            <span class="label pull-right layui-bg-orange">风机</span>
                        </div>
                        <div class="panel-content">
                            <div class="panel-content">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">V</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="voltage" lay-verify="required"
                                                   placeholder="请输入电压" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">A</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="current" lay-verify="required"
                                                   placeholder="请输入电流" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">HZ</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="frequency" lay-verify="required"
                                                   placeholder="请输入频率" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" style="text-align: center;">
                                            <button type="button" class="layui-btn layui-btn-normal">启动</button>
                                            <button type="button" class="layui-btn layui-btn-primary">停止</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<fieldset class="layui-elem-field" style="margin-top: 30px;padding: 0 60px;">
    <legend>控制中心</legend>
    <div style="display: flex; justify-content: space-between;">
        <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
        <button type="button" class="layui-btn layui-btn-warm">默认按钮</button>
        <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
        <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
        <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
    </div>
</fieldset>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form;

        // 启动风机1的表单提交事件
        form.on('submit(startFan1)', function (data) {
            // 这里可以添加启动风机1的具体逻辑，比如发送请求到服务器等
            layer.msg('风机1启动');
            return false;
        });

        // 停止风机1的表单提交事件
        form.on('submit(stopFan1)', function (data) {
            // 这里可以添加停止风机1的具体逻辑
            layer.msg('风机1停止');
            return false;
        });

        // 复制上述启动和停止风机1的事件处理代码，修改对应的lay-filter（如startFan2、stopFan2等），处理风机2到风机8的启动和停止事件
    });
</script>
</body>
</html>